
<template>
  <div class="view-container">
    <div class="app-title-container title-position">
      <modules-title title-name="检验依据">
        <template slot="btn">
          <el-button
            v-hasPermi="{v: ['quality:all'], isF: true}"
            type="primary"
            @click="createQuality"
          >创建检验依据</el-button>
        </template>
      </modules-title>
    </div>
    <div class="main-content-container">
      <div class="app-main-container">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="100px"
        >
          <el-form-item
            label="检验依据状态"
            style="margin-right: 40px"
          >
            <el-select
              v-model="queryParams.condition.quality_standard_status"
              placeholder="请选择状态"
              size="small"
              @change="afreshList"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.label"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="检验依据类型"
            style="margin-right: 40px"
          >
            <el-select
              v-model="queryParams.condition.quality_type_name"
              placeholder="请选择检验依据类型"
              size="small"
              clearable
              @change="afreshList"
            >
              <el-option
                v-for="dict in qualityTypeOption"
                :key="dict.id"
                :label="dict.dict_val"
                :value="dict.dict_val"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="检验依据来源"
            style="margin-right: 40px"
          >
            <el-select
              v-model="queryParams.condition.quality_source_name"
              placeholder="检验依据来源"
              size="small"
              clearable
              @change="afreshList"
            >
              <el-option
                v-for="dict in qualitySourceOption"
                :key="dict.id"
                :label="dict.dict_val"
                :value="dict.dict_val"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="关键字"
            style="margin-right: 40px"
          >
            <el-input
              v-model="queryParams.condition.quality_standard_name"
              clearable
              placeholder="请输入名称或编号"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="handleQuery"
            >搜索</el-button>
            <el-button
              plain
              size="small"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          class="tables"
          border
          size="medium"
          :data="tableList"
          row-key="id"
          :cell-style="tableCellStyle"
          @row-click="tableRowClick"
        >
          <el-table-column
            label="编号"
            align="center"
            prop="quality_standard_no"
          />
          <el-table-column
            label="名称"
            align="left"
            header-align="center"
            width="300px"
            prop="quality_standard_name"
          />
          <el-table-column
            label="版本号"
            align="center"
            prop="version"
          >
            <template #default="scope">
              <div v-if="scope.row.version">
                <span>V</span>
                <span>{{ scope.row.version }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="类型"
            align="center"
            prop="quality_type_name"
          />
          <el-table-column
            label="检验依据来源"
            align="center"
            prop="quality_source_name"
          />
          <el-table-column
            label="项目名称"
            align="center"
            prop="project_name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="创建人"
            align="center"
            prop="creator_name"
            width="120"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="created_at"
            width="160"
          />
          <el-table-column
            label="状态"
            align="center"
            prop="quality_standard_status"
            width="160"
          >
            <template slot-scope="scope">
              <div>
                <p
                  v-if="scope.row.quality_standard_status==1"
                  class="status-common"
                >草稿</p>
                <p
                  v-else-if="scope.row.quality_standard_status==2"
                  class="status-common"
                >审批中</p>
                <p
                  v-else-if="scope.row.quality_standard_status==3"
                  class="status-common"
                >审批通过[未启用]</p>
                <p
                  v-else-if="scope.row.quality_standard_status==4"
                  class="status-common"
                >生效中</p>
                <p
                  v-else-if="scope.row.quality_standard_status==5"
                  class="status-common"
                >已停用</p>
                <p
                  v-else-if="scope.row.quality_standard_status==6"
                  class="status-common"
                >变更中</p>
                <p
                  v-else-if="scope.row.quality_standard_status==-1"
                  class="status-common"
                >审批未通过</p>
                <p
                  v-else-if="scope.row.quality_standard_status==-2"
                  class="status-common"
                >回退</p>
                <p
                  v-else-if="scope.row.quality_standard_status==-3"
                  class="status-common"
                >已撤销</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="{v:['quality:all'],isF: scope.row.quality_standard_status==-3||scope.row.quality_standard_status==-2||scope.row.quality_standard_status==-1||scope.row.quality_standard_status==1||scope.row.quality_standard_status==3||scope.row.quality_standard_status==5}"
                type="text"
                size="meduim"
                @click="editItem(scope.row)"
              >编辑</el-button>
              <el-button
                v-if="scope.row.quality_standard_check&&scope.row.quality_standard_check.Cancelable==true&&scope.row.quality_standard_check.check_creator_id===userInfo.user.id"
                type="text"
                size="meduim"
                @click="cancelOperation(scope.row.quality_standard_check.id)"
              >撤销</el-button>
              <el-button
                v-hasPermi="{v:['quality:all'],isF: scope.row.quality_standard_status==1}"
                type="text"
                size="meduim"
                @click="submitApproval(scope.row)"
              >提交审批</el-button>
              <!-- <el-button
                v-hasPermi="{v:['quality:submit'],isF: scope.row.quality_standard_status==2}"
                type="text"
                size="meduim"
                @click="auditOperation(scope.row)"
              >审批</el-button> -->
              <!-- <el-button
                v-hasPermi="{v:['quality:all'], isF: scope.row.quality_standard_status==4}"
                type="text"
                size="meduim"
                @click="stopItem(scope.row)"
              >停用</el-button>
              <el-button
                v-hasPermi="{v:['quality:all'], isF: scope.row.quality_standard_status==3||scope.row.quality_standard_status==5}"
                type="text"
                size="meduim"
                @click="startItem(scope.row)"
              >启用</el-button> -->
              <el-button
                v-hasPermi="{v:['quality:all'], isF: scope.row.quality_standard_status==4}"
                type="text"
                size="meduim"
                @click="changeItem(scope.row)"
              >变更</el-button>
              <el-button
                v-hasPermi="{v:['quality:all'],isF: scope.row.quality_standard_status==-3||scope.row.quality_standard_status==-1||scope.row.quality_standard_status==1||scope.row.quality_standard_status==3||scope.row.quality_standard_status==5}"
                class="text-btn-red"
                type="text"
                size="meduim"
                @click="deleteItem(scope.row)"
              >删除</el-button>
              <!-- <el-button
                v-hasPermi="{v:['quality:detail'], isF: true}"
                class="text-btn-yellow"
                size="medium"
                type="text"
                @click="details(scope.row)"
              >详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          style="display:flex;justify-content:flex-end;"
          :total="total"
          :page.sync="queryParams.pager.skip"
          :limit.sync="queryParams.pager.limit"
          @pagination="getList"
        />
      </div>
      <!-- 审批 -->
      <audit-dialog
        :id="currentId"
        ref="auditDialog"
        @auditSuccess="auditSuccess"
      />
    </div>
  </div>
</template>
<script>
import {
  qualitySourceList,
  changeStatus,
  qualitySourceDelete,
  submitAudit
} from '@/api/qualitySource'
export default {
  name: 'QualityList',
  components: {
    AuditDialog: () => import('../modules/auditDialog.vue')
  },
  data() {
    return {
      userInfo: null,
      currentId: '',
      showSearch: true,
      // 总条数
      total: 0,
      // 流程审批测试表格数据
      tableList: [],
      // $comment字典
      statusOptions: [
        { id: 1, value: 0, label: '全部' },
        { id: 2, value: 1, label: '草稿' },
        { id: 3, value: 2, label: '审批中' },
        // { id: 4, value: 3, label: '审批通过[未启用]' },
        { id: 5, value: 4, label: '生效中' },
        // { id: 6, value: 5, label: '已停用' },
        // { id: 10, value: 6, label: '变更中' },
        // { id: 7, value: -1, label: '审批不通过' },
        { id: 8, value: -2, label: '回退' }
        // { id: 9, value: -3, label: '已撤销' }
      ],
      // 查询参数
      queryParams: {
        condition: {
          quality_standard_status: 0,
          quality_type_name: '',
          quality_source_name: '',
          quality_standard_name: ''
        },
        pager: {
          limit: 10,
          skip: 1
        }
      },
      qualityTypeOption: [],
      qualitySourceOption: [],
      // 表单校验
      rules: {
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      }
    }
  },
  // 返回后是否刷新列表
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next)
    to.params.refresh = from.params.refresh

    next()
  },
  activated: function() {
    if (this.$route.params.refresh) {
      this.getList()
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo
    this.getList()
    this.getSysAllDic()
  },
  methods: {
    // 创建检验依据
    createQuality() {
      this.$router.push({
        name: 'createQuality',
        query: {
          types: 'create'
        }
      })
    },
    tableRowClick(row, column, event) {
      if (column.label === '操作') return
      this.$router.push({
        name: 'qualityDetail',
        query: {
          qualityId: row.id
        }
      })
    },
    tableCellStyle(row) {
      if (row.column.label === '操作') {
        return
      } else {
        return 'cursor: pointer'
      }
    },
    details(row) {
      this.$router.push({
        name: 'qualityDetail',
        query: {
          qualityId: row.id
        }
      })
    },
    getSysAllDic() {
      let allDic = this.$store.getters.sysDic()
      if (!allDic) {
        this.$store.dispatch('sys/getSysAllDic').then((data) => {
          allDic = data
        })
      }
      console.log(allDic)
      this.qualityTypeOption = allDic['quality_type']
      this.qualitySourceOption = allDic['quality_source']
    },
    // 变更
    changeItem(row) {
      this.$router.push({
        name: 'createQuality',
        query: {
          qualitySourceId: row.id,
          types: 'change'
        }
      })
    },
    deleteItem(row) {
      const that = this
      const datas = { id: row.id }
      this.$confirm('是否确认删除该检验依据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          qualitySourceDelete(datas).then((res) => {
            if (res.code === 200) {
              if (
                that.total > that.tableList.length &&
                that.tableList.length === 1
              ) {
                that.queryParams.pager.skip = that.queryParams.pager.skip - 1
              }
              that.getList()
            } else {
              that.$message({
                type: 'error',
                message: res.msg,
                duration: 1500
              })
            }
          })
        })
        .catch(function() {})
    },
    editItem(row) {
      this.$router.push({
        name: 'createQuality',
        query: {
          qualitySourceId: row.id,
          types: 'edit'
        }
      })
    },
    submitApproval(row) {
      submitAudit({ id: row.id }).then((res) => {
        if (res.code === 200) {
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
            duration: 1500
          })
        }
      })
    },
    stopItem(row) {
      this.$confirm('是否确认停用该检验依据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeStatusOperation(row.id, 5)
      })
    },
    startItem(row) {
      this.$confirm('是否确认启用该检验依据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeStatusOperation(row.id, 4)
      })
    },
    changeStatusOperation(id, status) {
      const datas = { id: id, quality_standard_status: status }
      changeStatus(datas).then((res) => {
        if (res.code === 200) {
          this.getList()
        }
      })
    },
    afreshList() {
      this.queryParams.pager.skip = 1
      this.queryParams.pager.limit = 10
      this.getList()
    },
    /** 查询流程审批测试列表 */
    getList() {
      qualitySourceList(this.queryParams).then((res) => {
        this.tableList = res.data.data
        this.total = res.data.total
      })
    },
    // 表单重置
    reset() {
      this.queryParams = {
        condition: {
          quality_standard_status: 0,
          quality_type_name: '',
          quality_source_name: '',
          quality_standard_name: ''
        },
        pager: {
          limit: 10,
          skip: 1
        }
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pager.skip = 1
      this.queryParams.pager.limit = 10
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset()
      this.getList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({
        name: 'createQuality',
        query: {
          qualityId: row.id
        }
      })
    },
    auditOperation(row) {
      this.currentId = row.id
      this.$refs.auditDialog.open()
    },
    auditSuccess() {
      this.getList()
    },
    // 撤销
    cancelOperation(id) {
      this.$alert('是否确认撤销？', '撤销', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const subdata = {
            flow_id: id,
            model_type: 'QualitySource'
          }
          this.$comFun
            .cancelFunc(subdata)
            .then(() => {
              this.$message({
                type: 'success',
                message: '已撤销'
              })
              this.getList()
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
  } // methods结束
}
</script>

<style lang="scss" scoped>
.view-container {
  padding-top: 110px;
  box-sizing: border-box;
}
.tables {
  .tag-item {
    margin-right: 20px;
    &:last-of-type {
      margin-right: 0px;
    }
  }
}
</style>
